Every XHTML document consists of some boilerplate at the top, a head and a body.
The easiest way to start writing a new XHTML document is to click file on the Dreamweaver top bar, then click new, which opens the New Document window, then click Basic Page, which gives you 10 lines of boilerplate which looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Please note that I cheated here and, for instructional purposes, made the XHTML tags display in the Dreamweaver code view as well as your browser! Note also that this makes them look wierd and nearly undecipherable in the code view, so I will not do it too much. Note also that "charset=iso-8859-1" is for Dreamweaver 8. In Dreamweaver CS3, this is replaced with "charset=utf-8" Forget about the trivial difference.
The function of the head is only to display a title for the web page in the browser title bar. Nothing typed in the head appears in the document itself. I suggest that after you have created your basic page, you replace the text "Untitled Document" with whatever you want the title of your document to be.
Next you may start to develop your document by inserting material into the body. Everything you type in the design window goes into the body.
Sections of the body are commonly set off with
It is definitely confusing, but headings go into the body, not the head! One way to insert a heading with Dreamweaver, is to click Text on the top bar, then click Paragraph and choose your heading size. This will convert whatever paragraph your cursor is in to the chosen heading size.
To enter text into your document, simply type it in the Design window. Every time you hit the enter key, a new paragraph, (set off with the <p>.....</p> tag) will start.
Recall that hypertext means that web documents are non-linear. Hyperlnks are used to skip around a web page and to open a new or different web page. Here is a link to the web site of Deitel & Associates. Their web site is really very useful for web development, especially for higher education. Deitel & Deitel have written many excellent textbooks one of which, Internet & World Wide Web How to Program, I use as the textbook at CSI for CSC225, Introduction to Web Development & the Internet. Many of the examples in this tutorial are taken from Deitel & Deitel, with their explicit permission. (Disclaimer: I do not work for, consult to, nor own shares in Deitel & Associates).
The easy way to create a hyperlink using Dreamweaver, is to click insert on the top row of the main window, then click hyperlink and fill in the form which pops up. In the text box, type whatever you want to appear in your document as the name of the link, e.g. "Deitel" in the example here. In the link box type the URL of the hyperlink you want your browser to jump to, "http://www.deitel.com" in the example. For now, leave the target box and the title box blank. More on them later.
The XHTML tags used to create hyperlinks are visable above in the code view Note that the links themselves are displayed in blue, as explained in Part 1. Note also that the word 'blue' herein is NOT displayed in blue because that would be cheating. I told you previously that this part of the tutorial would use only XHTML. Fonts and colors are formatting, which is part of CSS, Cascading Style Sheets, not XHTML. For the same reason, this document is written using the default font, Times New Roman, which I hate instead of Arial which I like, because I needed to cheat to sneak in the Arial. Mea culpa. Take a look at the code view above to find out how I cheated and for a tiny preview of Cascading Style Sheets (CSS). Also, please note that the Arial, (here rendered in Times New Roman), does not display in the Dreamweaver Design view, but it does display in your browser (hit the F12 key to prove this). Note also that bold and italics are part of XHTML, not CSS because they use the XHTML tags <strong>...</strong> and <em>...</em>. Note also that because '<' is an XHTML tag, it cannot be used as text character in XHTML; &l;t represents '<' as you can see in the code view . This is true for many common symbols.
Aha, maybe I have fooled you. The last two links in the list look identical. Look more carefully at the tags (in the code view). The first link opens in the current browser window, replacing what you are viewing; the second link opens in a new window. The foregoing links were all to external web pages. Here is an internal link, to the top of this page:
To create an internal link using Dreamweaver, as with external links, click insert on the top row of the main window, then click hyperlink and fill in the form which pops up. In the text box, type whatever you want to appear in your document as the name of the link, e.g. "top" in the example here. In the link box type the URL of the hyperlink you want your browser to jump to, "http://#top" in the example, in the title box type anything you like, "Go back to the top of this page" in this example. There is one more thing yo need to do to make the internal link work: enter "id=text name of link" inside the header tag to which you want to link to jump, in the example, <h1 id="top">Dreamweaver Tutorial Part 3 </h1>.
Here is an easy way to send me (or anyone else whose address you substitute here) an email:
Send an email to Emile Chi . Click this and your default email client will open a new email message and address it to me.
To create an emai link using Dreamweaver, click insert on the top row of the main window, then click Email link and fill in the form which pops up. In the text box, type whatever you want to appear in your document as the name of the link, e.g. "Emile Chi" in the example here. In the E-mail box type the email address of the person you want your email to go to"chi@mail.csi.cuny.edu" in the example.
One of the best and most important features of Dreamweaver is the very easy facility it provides to check that the documents you develop are written with valid XHTML. On the line, there is a of the Dreamweaver screen which contains the Code, Split, Design buttons there is a funny button which has a green triangle and <> symbols. This is the 'validate markup' window. Click on it and then click 'validate current document' and viola! Please fix any errors which the validator finds. I have not reproduced the little icon here because it is part of the Adobe copyrighted material. Also, I am too lazy to search the Web for the icon or reverse engineer the Dreamweaver code!
Extra credit to anyone who finds XHTML errors in these tutorials.
OK, this is long enough - lets go to Part 4 to learn about images and tables
Click here for part 4